<template>
  <div>
    <h2>{{ msg }}</h2>
    <!-- 方法一：通过父组件给子组件传递函数类型的props，实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"></School>
    <!-- 方法二：通过父组件给子组件绑定一个自定义事件，实现：子给父传递数据（ @或v-on ） -->
    <Student @atguigu="getStudentName" @demo="m1"></Student>
    <!-- 方法三：通过父组件给子组件绑定一个自定义事件，实现：子给父传递数据（ ref ） -->
    <!-- <Student ref="student"></Student> -->
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "msg 你好啊",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    // 此处可以使用es6中的...params扩展运算符接收
    getStudentName(name,...params) {
      console.log("App收到了学生名：", name,params);
    },
    demo(){
      console.log('demo被调用了');
    },
    m1(){
      console.log('demo事件被触发了了');
    }
  },
  mounted() {
    setTimeout(() => {
      // this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
      // this.$refs.student.$once("atguigu", this.getStudentName); //一次性绑定自定义事件
    }, 1500);
  },
};
</script>